import React, { Component } from "react";
import { Switch, Route, Redirect,NavLink } from "react-router-dom";
import Cate from "../Cate/Cate";
import Index from "../Index/Index";
import Shop from "../Shop/Shop";
import Mine from "../Mine/Mine";
import "./home.less"
//静态资源
import home_select from "../../assets/img/home_select.jpeg";
import home_no from "../../assets/img/home_no.jpeg";
import cate_select from "../../assets/img/cate_select.jpeg";
import cate_no from "../../assets/img/cate_no.jpeg";
import shop_select from "../../assets/img/shop_select.jpeg";
import shop_no from "../../assets/img/shop_no.jpeg";
import mine_select from "../../assets/img/mine_select.jpeg";
import mine_no from "../../assets/img/mine_no.jpeg";
export default class Home extends Component {
  render() {
    let {
      location: { pathname },
    } = this.props;
    return (
      
      <div className="home">
        <Switch>
          <Route path="/index/home" component={Index}></Route>
          <Route path="/index/cate" component={Cate}></Route>
          <Route path="/index/shop" component={Shop}></Route>
          <Route path="/index/mine" component={Mine}></Route>
          <Redirect to="/index/home"></Redirect>
        </Switch>
        <footer  className="footer">
          <NavLink activeClassName="select" to="/index/home">
            <img
              src={pathname == "/index/home" ? home_select : home_no}
              alt=""
            />
            <span>首页</span>
          </NavLink>
          <NavLink activeClassName="select" to="/index/cate">
            <img
              src={pathname == "/index/cate" ? cate_select : cate_no}
              alt=""
            />
            <span>分类</span>
          </NavLink>
          <NavLink activeClassName="select" to="/index/shop">
            <img
              src={pathname == "/index/shop" ? shop_select : shop_no}
              alt=""
            />
            <span>购物车</span>
          </NavLink>
          <NavLink activeClassName="select" to="/index/mine">
            <img
              src={pathname == "/index/mine" ? mine_select : mine_no}
              alt=""
            />
            <span>我的</span>
          </NavLink>
        </footer>
      </div>
    );
  }
}
